<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <title>BMI身体质量指数</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/BMI.css">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6 box">
            <!--<div class="row">-->
            <div class="calculator col-xs-10" id="calculator">
                &nbsp;&nbsp;身高:&nbsp;&nbsp;
                <label>
                    <input type="number" max="2.50" min="1.00" step="0.01" v-model="height">&nbsp;(米)
                </label>
                <br>
                &nbsp;&nbsp;体重:&nbsp;&nbsp;
                <label>
                    <input type="number" max="150" min="30" step="0.5" v-model="weight">&nbsp;(千克)
                </label>
                <br><br>
                <h3>BMI数值：{{ count }}</h3>
                <h5>按中国标准，您属于：{{ print }}</h5>
            </div>
            <div class="BMI_Picture">
                <table>
                    <thead style="background-color: rgb(141, 216, 248)">
                    <th class="classification">分类</th>
                    <th class="range">BMI范围</th>
                    </thead>
                    <tr style="background-color: rgb(204, 204, 204)">
                        <td class="classification">偏瘦</td>
                        <td class="range"><= 18.4</td>
                    </tr>
                    <tr style="background-color: rgb(102, 204, 0)">
                        <td class="classification">正常</td>
                        <td class="range">18.5 ~ 23.9</td>
                    </tr>
                    <tr style="background-color: rgb(255, 255, 0)">
                        <td class="classification">过重</td>
                        <td class="range">24.0 ~ 27.9</td>
                    </tr>
                    <tr style="background-color: rgb(255, 153, 0)">
                        <td class="classification">肥胖</td>
                        <td class="range">>= 28.0</td>
                    </tr>
                </table>
            </div>
            <!--</div>-->
            <h1><a href="./index.html">返回首页</a></h1>
            <div class="col-sm-3"></div>
        </div>
    </div>
</div>


<script src="./js/vue.js"></script>
<script src="./js/calculator.js"></script>
</body>

</html>